<!DOCTYPE html>
<html>
	<head>
		 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app"> 
			<zujian></zujian>
			<zujian1 name="张三"></zujian1>   <!--父组件 -->
			<zujian2 name="张三111" age="17"></zujian2>
			<zujian3  ></zujian3>
			<zujian4 name="lisi"></zujian4>
			<zujian5></zujian5>
			<zujian6 v-for="a in blogs" :tit="a.title" :d="a.date" :auth="a.author"></zujian6>
			<zujian7>
				slot11111111111
			</zujian7>
			<zujian7>
				slot22222
			</zujian7>
			
			<zujian8 @say-hello="nihao"></zujian8>
			 <br/>
		    <zujian9 @say-hello="nihao1"></zujian9>
			 <br/>
			<zujian10 @say-hello="nihao2"></zujian10>
			 <br/>
			 <zujian11 @send-list="nihao3"></zujian11>
			
			
		</div>
	</body>
	<script>
	/***	
	          在 Vue 2 中：组件的 template 必须 有且仅有一个根元素。如果没有，就会报 Component template requires a root element 的错误。
	         解决方法：用一个 <div> 或其他元素将所有内容包裹起来。
		      在 Vue 3 中：这个限制被移除了。你可以在 template 中直接放置多个同级元素，Vue 会自动处理。
		     如果你正在使用 Vue 2，记住 “一个组件，一个根元素” 这个黄金法则，就能轻松避免这个错误。
			 Vue.component 接受两个参数：
			 组件名称 (String)：这是你在模板中使用时的标签名。
			 组件选项 (Object)：这是一个包含 template, props, data, methods 等属性的对象，定义了组件的行为和外观。
			 template
			 定义组件的 HTML 结构。
			 注意：模板的根元素必须是唯一的。你不能这样写：template: '<h1>Hi</h1><p>There</p>'，
			 而应该用一个 <div> 或其他元素包裹起来：template: '<div><h1>Hi</h1><p>There</p></div>'。
		**/
          Vue.component("zujian",{
			  template:"<h1>欢迎来到Vue的世界</h1>"
		  });
		  
		  
		  /***  
		    Props 是组件的输入。它们允许父组件向子组件传递数据。
		   传递参数
		    子组件 
		   ***/
		  Vue.component("zujian1",{
			  props:["name"],
			  template:"<h1>欢迎{{name}}</h1>",   //template 结尾不能使用分号  逗号可以
		  });
		  
		  /***
		  传递多个参数 
		  ***/
		  Vue.component("zujian2",{
		  			  props:["name","age"],
		  			  template:"<h1>欢迎年龄是{{age}}的{{name}}来到Vue的世界</h1>",   //template 结尾不能使用分号  逗号可以
		  });
		  
		  
		  
		  /****
		  组件的 data 必须是一个函数，而不是一个对象。这是为了确保每个组件实例都有自己独立的数据副本，防止多个组件实例共享同一份数据。
		  ****/
		  Vue.component("zujian3",{ 
		  			  data(){
		  				  return {
		  					  count: 0 
		  				  }
		  			  },
		  			 template:"<button @click='count++'>点击了我{{count}}次</button>", 
		  });
		  
		  Vue.component("zujian4",{
			    props:["name"],  //Props是组件父组件传进来的内容
			  data(){  //data是可以再模板中使用的属性
				  return {
					  count: 0,
					  u:this.name,
				  }
			  },
			 template:"<button @click='count++'>{{u}}点击了我{{count}}次</button>", 
		  });
		  
		  /***
		  methods
		  定义组件的方法，这些方法可以在模板中通过 v-on (或 @) 指令调用。
		  **/
		  Vue.component("zujian5",{
			  methods:{
				  show:function(){
					  alert("触发了点击事件！！！！！！！！！！！！！！！");
				  }
			  },
			  template:"<button @click='show()'>点击按钮</button>",
		  });
		  
		  
		  /****
		  自定义组件  使用的是app实例的data的数据进行的循环
		  ****/
		  Vue.component("zujian6",{
			 props:["tit","d","auth"],
			 template:"<div>标题：{{tit}},时间：{{d}},作者：{{auth}}</div>",
			  
		  });
		  
		  
		  /****
		  slot 类似于占位符  可以动态的设置内容
		  ****/
		  Vue.component("zujian7",{
			  template:"<div><span>这是写死的内容!!!!</span><span>这是slot的内容:<slot></slot></span></div>",
		  });
		  
		  
		  /**** 
		  $emit 是 Vue 实例上的一个方法，它的作用是：触发当前组件实例上的一个自定义事件。
		  通过 $emit，子组件可以向父组件发送消息或数据，从而实现父子组件之间的通信。
		  <zujian8 @say-hello="nihao"></zujian8> 
		  自定义的名称 最好别使用驼峰命名的方式 
		  **/
		  Vue.component("zujian8",{
			  template:"<button @click='$emit(\"say-hello\")'>emit用法</button>",
		  });
		  
		  
		  /****
		  $emit 传递一个参数    字符串
		  **/
		  Vue.component("zujian9",{
		  			  template:"<button @click='$emit(\"say-hello\",\"zhangsan\")'>emit用法</button>",
		  });
		  
		  
		  /****
		  传递一个对象 
		  ***/
		  Vue.component("zujian10",{
		  			  template:`
						<button @click="$emit('say-hello', { name: '张三', message: '你好，父组件！' })">
						  点击我传递一个对象
						</button>
					  `,
		  });
		  
		  
		  /****
		  传递一个数组
		  ***/
		  Vue.component("zujian11", {
		    template: `
		      <button @click="$emit('send-list', ['苹果', '香蕉', '橙子'])">
		        点击我传递一个水果列表
		      </button>
		    `
		  });
		  
		  
 
		var app =new Vue({
			el:"#app",
			data:{
				  blogs: [
				               {
				                   title: '标题一',
				                   date: '2019-09-13',
				                   author: 'javaboy'
				               }, {
				                   title: '标题二',
				                   date: '2019-09-14',
				                   author: 'javaboy'
				               }, {
				                   title: '标题三',
				                   date: '2019-09-15',
				                   author: '江南一点雨'
				               }
				           ]
			},	
			methods:{
				nihao:function(){
					alert("nihao");
				},
				nihao1:function(name){
					alert("nihao:"+name);
				},
				nihao2:function(obj){
					alert(obj.name+":"+obj.message);
				},
				nihao3:function(arr){
					alert(arr);
				}
			}
			
			
		}); 
	</script>
</html>
